<template>
  <div class="page">
    <nav-bar title="重点单位巡查" border></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky class="page-scroll" :offset-top="44">
        <van-form input-align="right" :label-width="120">
          <van-field readonly label-class="van-cell__title_gray" v-model="formParams.companyName" label="单位名称" />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            v-model="formParams.companyTypeName"
            label="单位类型"
          />
          <div class="inspect-detail-item">
            <van-field readonly label-class="van-cell__title_gray" v-model="item.inspectionTime" label="巡查时间" />
            <!-- 有无隐患 -->
            <!--            <template v-if="item.inspectionResult">-->
            <van-field
              readonly
              label-class="van-cell__title_gray"
              required
              v-model="item.inspectionResultName"
              label="巡查结果"
            />
            <template v-if="item.inspectionResult === '1'">
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="item.latentDangerLevelName"
                label="隐患风险级别"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="item.plannedCompletionTime"
                label="计划完成整改时间"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="item.correctionManager"
                label="整改负责人"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="item.correctionManagerPhone"
                label="负责人联系方式"
              />
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                label="隐患排查存在问题及说明"
                :label-width="180"
                :border="false"
              />
              <van-field
                readonly
                v-model="item.latentDangerDetail"
                rows="5"
                autosize
                type="textarea"
                :border="false"
                input-align="left"
                class="van-field__value--textarea-lightgray"
              />
              <template v-if="item.latentDangerProgramme">
                <van-field readonly label-class="van-cell__title_gray" label="整治方案及措施" :border="false" />
                <van-field
                  readonly
                  v-model="item.latentDangerProgramme"
                  rows="5"
                  autosize
                  type="textarea"
                  :border="false"
                  input-align="left"
                  class="van-field__value--textarea-lightgray"
                />
              </template>
            </template>
            <!--            </template>-->
            <!-- 是否解决 -->
            <template v-if="item.latentDangerResult">
              <van-field
                readonly
                label-class="van-cell__title_gray"
                required
                v-model="item.latentDangerResultName"
                label="隐患解决情况"
              />
              <template v-if="item.latentDangerResult === '1'">
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="item.actualFinishTime"
                  label="实际完成整改时间"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="item.acceptanceCheckManager"
                  label="验收人"
                />
                <van-field
                  readonly
                  label-class="van-cell__title_gray"
                  required
                  v-model="item.acceptanceCheckManagerPhone"
                  label="验收人联系方式"
                />
                <template v-if="item.latentDangerReport">
                  <van-field label="事故隐患报告" readonly :border="false" />
                  <van-field class="van-field__value--upload" :border="false" input-align="left">
                    <template #input>
                      <div class="van-uploader__input--white" @click="handleDownFile(item.latentDangerReport)">
                        <div class="van-uploader__input--content active">
                          <div class="upload-image">
                            <van-icon name="description" size="24" />
                          </div>
                          <div class="upload-text">
                            {{ item.latentDangerReport.split('.')[1] }}
                          </div>
                        </div>
                      </div>
                    </template>
                  </van-field>
                </template>
                <template v-if="item.latentDangerProgrammeReport">
                  <van-field label="事故隐患治理方案" readonly :border="false" />
                  <van-field class="van-field__value--upload" :border="false" input-align="left">
                    <template #input>
                      <div class="van-uploader__input--white" @click="handleDownFile(item.latentDangerProgrammeReport)">
                        <div class="van-uploader__input--content active">
                          <div class="upload-image">
                            <van-icon name="description" size="24" />
                          </div>
                          <div class="upload-text">
                            {{ item.latentDangerProgrammeReport.split('.')[1] }}
                          </div>
                        </div>
                      </div>
                    </template>
                  </van-field>
                </template>
              </template>
            </template>
            <template v-if="item.imageUrl">
              <van-field readonly label="现场照片/视频" label-class="van-cell__title_gray" :border="false" />
              <van-field class="van-field__value--upload" input-align="left" :border="false">
                <template #input>
                  <van-uploader
                    v-model="fileList"
                    :show-upload="false"
                    :deletable="false"
                    @click-preview="previewClick"
                  >
                    <template #preview-cover="file">
                      <template v-if="format.includes(file.url.split('.')[file.url.split('.').length - 1])">
                        <div class="van-uploader__preview-masker"></div>
                        <video-player
                          class="video-player vjs-custom-skin"
                          :playsinline="true"
                          :options="{
                            aspectRatio: '16:16',
                            preload: 'auto',
                            sources: [
                              {
                                src: file.url
                              }
                            ]
                          }"
                        ></video-player>
                      </template>
                    </template>
                  </van-uploader>
                </template>
              </van-field>
            </template>
          </div>
          <div style="padding: 64px 16px">
            <van-button
              v-if="!$route.query.date"
              block
              type="info"
              size="large"
              @click="
                $router.push({
                  path: '/inspectvisit/inspect/company/report',
                  query: $route.query
                })
              "
            >
              再次巡查
            </van-button>
          </div>
        </van-form>
      </van-sticky>
    </div>
    <gb-video :url="videoUrl" :show.sync="videoPopupShow"></gb-video>
  </div>
</template>
<script>
import InspectVisit from '@/api/inspectVisit'
export default {
  data() {
    return {
      format: ['mp4', 'avi', 'mov'],
      fileList: [],
      videoPopupShow: false,
      videoUrl: '',
      formParams: {},
      item: {}
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      let params = {}
      if (this.$route.query.inspectionPointCode) params = { inspectionPointCode: this.$route.query.inspectionPointCode }
      if (this.$route.query.code) params = { code: this.$route.query.code }
      InspectVisit.Company[this.$route.query.type](params).then(res => {
        const { status, data } = res.data
        this.formParams = data
        if (status === 0) {
          if (this.$route.query.type === 'detail') {
            // 巡查详情
            this.item = this.formParams.inspectionRecord[this.formParams.inspectionRecord.length - 1]
          } else if (this.$route.query.type === 'recordDetail') {
            // 巡查记录详情
            this.item = data
          }
          if (this.item.imageUrl) {
            this.fileList = this.item.imageUrl.split(',').map(o => {
              return {
                url: this.$config.ImageURl + o
              }
            })
          }
        }
      })
    },
    // 视频预览
    previewClick({ url }) {
      const urlArr = url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = url
      }
    },
    // 下载文件
    handleDownFile(url) {
      location.href = this.$config.ImageURl + url
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/inspectVisit/inspect/detail.less';
</style>
